<template>
	<s-layout navbar="normal1" :bgStyle="{src:sheep.$url.cdn('/static/img/badge_bg.png'),color:'#282C31'}">
		<assNavbar title="勋章" :background="{BGcolor:'transparent'}" color="#fff"/>
		<view class="content">
			<view class="head">
				<view class="head-user ss-flex-col ss-col-center">
					<image class="head-user-img" :src="sheep.$url.cdn(userInfo.avatar,'ygb')"  mode="aspectFit" />
					<view class="head-user-nickname ss-line-1">{{userInfo.nickname}}</view>
				</view>
				<view class="head-recent" v-if="recentBadge">
					<image class="head-recent-badge" :src="sheep.$url.cdn(recentBadge.icon,'ygb')" />
					<view class="head-recent-tips" >
						-最近获得-
					</view>
				</view>
			</view>
			<view class="list" >
				<view class="list-top">
					已点亮2枚勋章
				</view>
				<view class="list-badge">
					<view class="list-badgeBox">
						<view class="badgeBox-item" v-for="item in state.list" :key="item.key">
							<image class="badgeBox-item-badge" :src="sheep.$url.cdn(item.icon,'ygb')" />
							<view class="badgeBox-item-name" >{{item.name}}</view>
							<view :class="['badgeBox-item-tips',{open:openStaus(item.key)}]" >
								-{{openStaus(item.key)?'已获得':'未获得'}}-</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed ,nextTick } from 'vue'
	import { onLoad, onShow, onHide ,onPullDownRefresh} from '@dcloudio/uni-app';
	import assNavbar from '@/components/ass-navbar.vue';
import { find } from 'lodash';
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const state = reactive({
		list:[
			{
				name:'BD-白银骑士',
				key:'maker',
				icon:'/static/badge/bd_by.png'
			},
			{
				name:'BDM-黄金骑士',
				key:'leader',
				icon:'/static/badge/bdm_hj.png'
			},
			{
				name:'街道-铂金骑士',
				key:'short_partner',
				icon:'/static/badge/jd_bj.png'
			},
			{
				name:'区县-星耀骑士',
				key:'high_partner',
				icon:'/static/badge/qx_xy.png'
			},
			{
				name:'地市-子爵/王者 骑士',
				key:'founder',
				icon:'/static/badge/ds_wz.png'
			},
			{
				name:'股东-伯爵/荣耀骑士',
				key:'shareholder',
				icon:'/static/badge/gd_ry.png'
			},
		],
	})
	onLoad((opt)=>{

	})
	const recentBadge = computed(()=>{
		return state.list.find(obj=>obj.key == userInfo.value.extend.max_role)|| false
	})
	function openStaus(key){
		return userInfo.value.extend[key] || false
	}
	function onClick(){
		sheep.$router.go('/pages/index/index')
	}
	
</script>

<style lang="scss" scoped>
	.content{
		// position: relative;
		.head{
			position: relative;
			height: 330rpx;
			.head-user{
				position: absolute;
				top: 90rpx;
				left: 40rpx;
				height: 133rpx;
				width: 200rpx;
				.head-user-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.head-user-nickname{
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #FFFFFF;
				}
			}
			.head-recent{
				position: absolute;
				top: 105rpx;
				left: 525rpx;
				.head-recent-badge{
					height: 150rpx;
					width: 150rpx;
					vertical-align: bottom;
				}
				.head-recent-tips{
					margin-top: 18rpx;
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
					line-height: normal;
					color: #7B7878;
				}
			}
		}
		.list{
			// position: absolute;
			// top: 264rpx;
			margin-top: -70rpx;
			width: 750rpx;
			background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/img/badge_list_bg.png');
			background-size: 750rpx 1209rpx;
			background-repeat: no-repeat;
			border-radius: 30rpx;
			.list-top{
				height: 70rpx;
				padding-left: 37rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 70rpx;
				letter-spacing: normal;
				color: #1B1B1B;
			}
			.list-badge{
				padding: 24rpx 20rpx;
				.list-badgeBox{
					display: flex;
					flex-wrap: wrap;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx 0;
					.badgeBox-item{
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 24rpx;
						.badgeBox-item-badge{
							height: 150rpx;
							width: 150rpx;
							vertical-align: bottom;
						}
						.badgeBox-item-name{
							margin-top: 14rpx;
							font-family: Source Han Sans;
							font-size: 32rpx;
							font-weight: 500;
							letter-spacing: normal;
							color: #1B1B1B;
						}
						.badgeBox-item-tips{
							font-family: Source Han Sans;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 1;
							color: #7B7878;
						}
						.open{
							color: #3F86FF;
						}
					}
				}
			}
		}
		
	}
</style>